<template>
    <!-- logo和搜索框 -->
    <LogoAndSearch></LogoAndSearch>

    <!-- 顶部信息栏 -->
    <TopInfo></TopInfo>

    <!-- 导航菜单栏 -->
    <NavMenu></NavMenu>

    <div style="position: absolute;left: 10%;top: 20%;"> 您现在的位置：客运首页 > 注册 </div>
    <div
        style="background-color: rgb(40,139,204);width: 80%;height:25px;position: absolute;left: 10%;top: 23%;color: white;line-height: 20px;">
        &emsp;账户信息</div>
    <el-card class="box-card">
        <el-form :model="formData" label-width="400px">
            <el-form-item>
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>用户名：</span>
                </template>

                <el-input v-model="formData.username" style="width: 300px;" placeholder="用户名设置成功后不可修改" /> <span
                    class="color"> 6-30位字母、数字或“_”,字母开头</span>
            </el-form-item>
            <el-form-item>
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>登录密码：</span>
                </template>
                <el-input type="password" v-model="formData.password" style="width: 300px;" placeholder="6-20位数字、字母或符号" />
            </el-form-item>
            <el-form-item>
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>确认密码：</span>
                </template>
                <el-input type="password" v-model="confirmPass" style="width: 300px;" placeholder="再次输入您的登录密码" />
            </el-form-item>

            <el-form-item label="证件类型：">
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>证件类型：</span>
                </template>
                <el-select v-model="formData.idtype" style="width: 300px;">
                    <el-option label="中国居民身份证" value="1" />
                    <el-option label="港澳台居民居住证" value="2" />
                    <el-option label="港澳居民来往内地通行证" value="3" />
                    <el-option label="台湾居民来往大陆通行证" value="4" />
                    <el-option label="中国居民身份证" value="5" />
                    <el-option label="护照" value="6" />
                    <el-option label="外国人永久居留身份证" value="7" />

                </el-select>
            </el-form-item>

            <el-form-item label="姓名：">
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>姓名：</span>
                </template>
                <el-input v-model="formData.name" style="width: 300px;" placeholder="请输入姓名" /> <span class="color">
                    <u>姓名填写规则</u>（用于身份核验，请正确填写）</span>
            </el-form-item>
            <el-form-item label="证件号码：">
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>证件号码：</span>
                </template>
                <el-input v-model="formData.id" style="width: 300px;" placeholder="请输入您的证件号码" /> <span class="color">
                    （用于身份核验，请正确填写）</span>
            </el-form-item>
            <el-form-item label="优惠（待）类型：">
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>优惠（待）类型：</span>
                </template>
                <el-select v-model="formData.favortype" style="width: 300px;">
                    <el-option label="成人" value="1" />
                    <el-option label="儿童" value="2" />
                    <el-option label="学生" value="3" />
                    <el-option label="残疾军人" value="4" />
                </el-select>
                <!-- <el-input v-model="formData.discountType" style="width: 300px;" size="small"/> -->
            </el-form-item>
            <hr>
            <el-form-item label="邮箱：">
                <el-input v-model="formData.email" style="width: 300px;" placeholder="请正确填写邮箱地址" />
            </el-form-item>
            <el-form-item label="手机号码：">
                <template v-slot:label>
                    <span style="color: red">*</span>
                    <span>手机号码：</span>
                </template>

                <el-select style="width: 100px;" v-model="formData.mobiletype">
                    <el-option label="+86 中国" value="1" />
                    <el-option label="+852 中国香港" value="2" />
                    <el-option label="+853 中国澳门" value="3" />
                    <el-option label="+886 中国台湾" value="4" />
                </el-select>
                <el-input v-model="formData.mobile" style="width:200px;" placeholder="手机号码" /> <span class="color">
                    请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
            </el-form-item>
            <el-form-item>

                <el-checkbox v-model="checked" />
                <template v-slot:label>
                    <div style="display: inline;">

                        <span style="position: relative;left:420px;">我已阅读并同意遵守</span>
                        <span style="color: #409EFF;position: relative;left:420px;">《中国铁路客户服务中心网站服务条款》 </span>
                        <span style="color: #409EFF;position: relative;left:800px;bottom: 32px;">《隐私权政策》</span>

                    </div>
                </template>
            </el-form-item>

            <el-form-item>
                <el-button style="background-color: orange;color: white;" @click="next">下一步</el-button>
            </el-form-item>
        </el-form>



    </el-card>

    <el-dialog v-model="dialogFormVisible" title="手机双向验证">

        <div class="font-serif" style="">
            <img src="../assets/peo.png">&emsp;&emsp;为了保护您的信息安全，便于今后为您服务，请按以下程序进行手机双向核验:<br><br>
            &emsp;&emsp;12306接到您的短信后将给您的手机回复六位数字短信，<br>
            &emsp;&emsp;请您在十分钟内将六位数字短信填写在下方空白框中,并点击”完成注册"按钮。<br>
        </div>

        <div style="display: flex;font-size: 16px;line-height: 30px;padding-top: 20px;padding-left: 50px;">
            验证码：<el-input v-model="code1" autocomplete="off" style="width: 200px;" />
        </div>


        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回修改</el-button>
                <el-button type="primary" @click="ToRegister" style="background-color: orange;">
                    完成注册
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">


import { ref } from 'vue'

import NavMenu from '../components/home/NavMenu.vue'
import TopInfo from '../components/home/TopInfo.vue'
import LogoAndSearch from '../components/home/LogoAndSearch.vue'

import { storeToRefs } from 'pinia'

import { useRegisterStore } from '../stores/register'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter();

const registerStore = useRegisterStore()

const { formData, code } = storeToRefs(registerStore)
//手机号正则表达式
var reg_tel = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;



let confirmPass = ref('');
let dialogFormVisible = ref(false);

//遵守《隐私权政策》
let checked = ref(false)

let code1 = ref('')

let next = () => {

    if (!checked.value) {
        ElMessage.error("请确定服务条款！")
    }

    else if (formData.value.username == null ||
        formData.value.username == '' ||
        formData.value.password == null ||
        formData.value.password == '' ||
        formData.value.name == null ||
        formData.value.name == '' ||
        formData.value.id == null ||
        formData.value.id == '' ||
        formData.value.mobile == null ||
        formData.value.mobile == ''
    ) {
        ElMessage.error('必填项不能为空！')
    }


    else if (formData.value.password != confirmPass.value) {
        ElMessage.error('两次密码不一致！')
    }

    else if (!reg_tel.test(formData.value.mobile)) {
        ElMessage.error("请输入正确的手机号码！")
    }

    else {
        //发送验证码
        registerStore.sendPhoneMessage();
        dialogFormVisible.value = true;
    }
}

let ToRegister = () => {

    if (code1.value == code.value) {
        dialogFormVisible.value = false;
        registerStore.register();

        //sessionStorage.setItem('user', JSON.stringify(formData.value));
        console.log(formData.value.username);
        console.log(formData.value.password);


        router.push({
            path: "/", query: {
                username: formData.value.username,
            }
        })
    }
    else {
        ElMessage.error('验证码错误！')
    }


}
</script>



<style scoped>
.box-card {
    width: 80%;
    height: 520px;
    position: absolute;
    left: 10%;
    top: 26%;
}

.color {
    color: orange;
    margin-left: 10px;
}

.el-form-item {
    margin-bottom: 10px;
}

.font-serif {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 16px;
    height: 120px;
    width: 94.5%;
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 244, 212, 1));
    border-radius: 10px;
    color: cornflowerblue;
    padding: 20px;
}
</style>